<script setup lang="ts">
import {ref, watch} from "vue";
import {useRouter,useRoute} from "vue-router";

const router = useRouter();
const route = useRoute();
let menuList = ref([
  {label: '连接员', selected: false}, {label: '车站值班员', selected: false}, {
    label: '驼峰作业员',
    selected: false
  }, {label: '驼峰值班员', selected: false}, {label: '调车指导员', selected: false}, {
    label: '车站调度员',
    selected: false
  }, {label: '车后员', selected: false}, {label: '扳道员', selected: false}, {
    label: '调车区长',
    selected: false
  }, {label: '业尾作业员', selected: false}, {label: '制动员', selected: false}, {label: '信号员', selected: false}
]);

function clickHandler(index:number,upRoute:boolean){
  menuList.value.forEach((e)=>e.selected=false);
  menuList.value[index].selected = true;

  if(upRoute){
    updateRoute(index)
  }
}

const updateRoute = (index:number) => {
  router.push({
    path: route.path,
    query: {
      ...route.query,
      leftMenuIndex: index,
    },
  });
};


const fetchData = (query: any) => {
  // 根据路由参数执行你的逻辑，例如获取数据
  if (query.leftMenuIndex) {
    const leftMenuIndex = Array.isArray(query.leftMenuIndex) ? query.leftMenuIndex[0] : query.leftMenuIndex;
    clickHandler(leftMenuIndex,false);
  } else {
    console.error('mainTopIndexNavigation 没进来');
  }
};

// function initTopMenu(indexLocal:number){
//   if(indexLocal==props.index){
//     selected.value=true;
//   }
// }

// 立即执行一次 fetchData，并监听 route.query 的变化
watch(() => route.query, fetchData, { immediate: true });

</script>

<template>
  <div class="rootMainStyle">
    <div class="head_class">
      <img src="../../assets/learn.png" width="28px" height="28px">
      <div style="width: 10px;  "></div>
      <div style="white-space: nowrap;margin-right: 15px">
      职业生涯学习
      </div>
    </div>
    <div v-for="(elment,index) in menuList" :key="index" @click="clickHandler(index,true)" class="menu_style" :class="{'menu_style_selected':elment.selected}">
      <img src="../../assets/menu_icon.png" width="18px" height="18px" alt="{{elment.label}}">
    <div style="width: 8px;"></div>
      <div style="font-size: 16px;color: #FFFFFF">
      {{elment.label}}
    </div>
  </div>
  </div>
</template>

<style scoped>

.rootMainStyle{
  background: url('../../assets/menu_back_ground.png'),
  linear-gradient( 180deg, #004373 0%, #012B4B 100%);
  background-size: cover; /* 让背景图片覆盖整个容器 */
  border-radius: 6px;
  padding-left: 15px;
}

.head_class{
  display: flex;
  flex-direction: row;
  padding: 20px 0;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
  color: #FFFFFF;
}

.menu_style{
  cursor: pointer;/*鼠标移动上去是手型*/
  display: flex;
  flex-direction: row;
  padding-left: 20px;
  align-items: center;
  margin-bottom: 12px;
  margin-top: 12px;
  height: 62px;
}

/*当菜单选中后*/
.menu_style_selected{
  background-image: url('../../assets/menu_selected.png');
  background-size: cover; /* 让背景图片覆盖整个容器 */
  background-position: left; /* 居中背景图片 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  width: 156px;
  height: 62px;
}

</style>